<template>
  <div>
    <CustomerArchiveBaseInfo :detail="detail" />
    <c-title title="客户管理信息">
      <QupList :column="3" sep="：" default-value="" label-position="right" label-width="130">
        <QupListItem label="是否经营异常" :value="ctmCustomerDTO.isManageAnomaly" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem v-if="[1,'1'].includes(ctmCustomerDTO.isManageAnomaly)" label="市场经营异常类型" :value="ctmCustomerDTO.manageAnomalyType" dict-type-code="CTM_ABNORMAL_OPERATION_TYPE" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="启用状态" :value="[1,'1'].includes(customerDetailDTO.status)?'启用':'停用'" />
        <QupListItem label="市场层级分类" :value="ctmCustomerDTO.marketType" dict-type-code="CTM_MARKET_LEVLE" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem v-if="[1,'1'].includes(ctmCustomerDTO.isManageAnomaly)" label="市场经营异常备注" :value="ctmCustomerDTO.manageAnomalyTypeRemark" :span="24" />
      </QupList>
    </c-title>
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane name="shop" label="门店信息">
        <table-box ref="shop" class="table-height-auto" :data="shopTableData" :table-config="shopTableConfig" />
      </el-tab-pane>
      <el-tab-pane name="addr" label="收货地址">
        <table-box ref="addr" class="table-height-auto" :data="addrTableData" :table-config="addrTableConfig" />
      </el-tab-pane>
      <el-tab-pane name="account" label="业务账号">
        <table-box ref="account" class="table-height-auto" :data="accountTableData" :table-config="accountTableConfig" />
      </el-tab-pane>
      <el-tab-pane name="transportObject" label="账号送达方关系">
        <table-box ref="transportObject" class="table-height-auto" :data="transportObjectTableData" :table-config="transportObjectTableConfig" />
      </el-tab-pane>
      <el-tab-pane name="contacts" label="联系人">
        <table-box ref="contacts" class="table-height-auto" :data="contactsTableData" :table-config="contactsTableConfig" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import CustomerArchiveBaseInfo from '../customerArchiveBaseInfo'
export default {
  name: 'Achive',
  components: {
    CustomerArchiveBaseInfo
  },
  props: {
    detail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      activeTab: 'shop',
      shopTableConfig: {
        hideFuncBar: true,
        tabIndex: 11,
        setting: [
          {
            prop: 'code',
            label: '门店编码',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('code'), false)
            }
            // formatData: this.getShopProp('code')
          },
          {
            prop: 'name',
            label: '门店名称',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('name'), false)
            }
            // formatData: this.getShopProp('name')
          },
          {
            prop: 'shopNature',
            label: '门店性质',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, (h, row) => {
                return h('c-mdm-view', {
                  props: {
                    value: this.getShopProp('shopNature')(row),
                    docCode: 'QY027',
                    label: this.getShopProp('shopNatureName')(row)
                  }
                })
              }, true)
            }
            // render: (h, row) => {
            //   return h('c-mdm-view', {
            //     props: {
            //       value: this.getShopProp('shopNature')(row),
            //       docCode: 'QY027',
            //       label: this.getShopProp('shopNatureName')(row)
            //     }
            //   })
            // }
          },
          {
            prop: 'shopAddr',
            label: '详细地址',
            minWidth: 130,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('shopAddr'), false)
            }
            // formatData: this.getShopProp('shopAddr')
          },
          {
            prop: 'manageStatusName',
            label: '门店经营状态',
            minWidth: 130,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('manageStatusName'), false)
            }
          },
          {
            prop: 'laseConstructTime',
            label: '最后一次门店建设时间',
            minWidth: 140,
            className: 'laseConstructTime',
            render: (h, row) => {
              return this.setShopGrey(h, row, (h, row) => {
                // if (!row.laseConstructTime) {
                //   return h('span')
                // }
                return h('div', {}, [
                  h('span', this.$trimHMS(row.laseConstructTime)),
                  h('el-tooltip', {
                    props: {
                      effect: 'dark',
                      content: '取当前门店最后一次装修完工时间',
                      placement: 'top-start'
                    }
                  }, [
                    h('i', {
                      class: 'el-icon-info'
                    })
                  ])

                ])
              }, true)
            }
          },
          {
            prop: 'decorationTime',
            label: '装修时长（月）',
            minWidth: 140,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.$trimHMS(row.decorationTime), false)
            }
          },
          // {
          //   prop: 'isOverdueUndecoration',
          //   label: '是否超期未装修',
          //   minWidth: 130,
          //   render: (h, row) => {
          //     return this.setShopGrey(h, row, (h, row) => {
          //       return h('c-dict-range-view', {
          //         props: {
          //           appCode: 'slm',
          //           domainCode: 'marketing',
          //           dictTypeCode: 'BOOLEANS',
          //           value: row.isOverdueUndecoration
          //         }
          //       })
          //     }, true)
          //   }
          //   // propEnum: {
          //   //   appCode: 'slm',
          //   //   domainCode: 'marketing',
          //   //   dictTypeCode: 'BOOLEANS'
          //   // }
          // },
          {
            prop: 'decorationDesc',
            label: '店面装修备注',
            minWidth: 150,
            render: (h, row) => {
              return this.setShopGrey(h, row, row.decorationDesc, false)
            }
          },
          {
            prop: 'isDecoration',
            label: '当前是否装修中',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, (h, row) => {
                return h('c-dict-range-view', {
                  props: {
                    appCode: 'slm',
                    domainCode: 'marketing',
                    dictTypeCode: 'BOOLEANS',
                    value: row.isDecoration
                  }
                })
              }, true)
            }
            // propEnum: {
            //   appCode: 'slm',
            //   domainCode: 'marketing',
            //   dictTypeCode: 'BOOLEANS'
            // }
          },
          {
            prop: 'belongStage',
            label: '门店建设所属阶段',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, (h, row) => {
                return h('c-dict-range-view', {
                  props: {
                    appCode: 'slm',
                    domainCode: 'marketing',
                    dictTypeCode: 'BELONG_STAGE',
                    value: row.belongStage
                  }
                })
              }, true)
            }
            // propEnum: {
            //   appCode: 'slm',
            //   domainCode: 'marketing',
            //   dictTypeCode: 'BELONG_STAGE'
            // }
          },
          {
            prop: 'isKaShop',
            label: '是否KA卖场',
            minWidth: 130,
            render: (h, row) => {
              return this.setShopGrey(h, row, (h, row) => {
                return h('c-dict-range-view', {
                  props: {
                    appCode: 'slm',
                    domainCode: 'marketing',
                    dictTypeCode: 'BOOLEANS',
                    value: row.isKaShop
                  }
                })
              }, true)
            }
            // propEnum: {
            //   appCode: 'slm',
            //   domainCode: 'marketing',
            //   dictTypeCode: 'BOOLEANS'
            // }
          },
          {
            prop: 'businessTypeName',
            label: '经营业务类型',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('businessTypeName'), false)
            }
            // formatData: this.getShopProp('businessTypeName')
          },
          {
            prop: 'operateArea',
            label: '经营总面积',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('operateArea'), false)
            }
            // formatData: this.getShopProp('operateArea')
          },
          {
            prop: 'endProductArea',
            label: '成品面积',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('endProductArea'), false)
            }
            // formatData: this.getShopProp('endProductArea')
          },
          {
            prop: 'bathroomArea',
            label: '卫浴面积',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('bathroomArea'), false)
            }
            // formatData: this.getShopProp('bathroomArea')
          },
          {
            prop: 'fullHouseArea',
            label: '全屋定制面积',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('fullHouseArea'), false)
            }
            // formatData: this.getShopProp('fullHouseArea')
          },
          {
            prop: 'cabinetArea',
            label: '整体橱柜面积',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('cabinetArea'), false)
            }
            // formatData: this.getShopProp('cabinetArea')
          },
          {
            prop: 'modelRoomArea',
            label: '样板间面积',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('modelRoomArea'), false)
            }
            // formatData: this.getShopProp('modelRoomArea')
          },
          {
            prop: 'curtainArea',
            label: '窗帘面积',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('curtainArea'), false)
            }
            // formatData: this.getShopProp('curtainArea')
          },
          {
            prop: 'bathroomSuite',
            label: '卫浴套数',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('bathroomSuite'), false)
            }
            // formatData: this.getShopProp('bathroomSuite')
          },
          {
            prop: 'cabinetSuite',
            label: '橱柜套数',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('cabinetSuite'), false)
            }
            // formatData: this.getShopProp('cabinetSuite')
          },
          {
            prop: 'shopInfoPhone',
            label: '门店咨询电话',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('shopInfoPhone'), false)
            }
            // formatData: this.getShopProp('shopInfoPhone')
          },
          {
            prop: 'shopServPhone',
            label: '门店售后电话',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('shopServPhone'), false)
            }
            // formatData: this.getShopProp('shopServPhone')
          },
          {
            prop: 'cityLevel',
            label: '城市级别',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('cityLevelName'), false)
            }
            // formatData: this.getShopProp('cityLevelName')
          },
          {
            prop: 'marketLevel',
            label: '市场层级',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('marketLevelName'), false)
            }
            // formatData: this.getShopProp('marketLevelName')
          },
          {
            prop: 'floor',
            label: '所在楼层',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, this.getShopProp('floor'), false)
            }
            // formatData: this.getShopProp('floor')
          },
          {
            prop: 'shopType',
            label: '店铺形态',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, (h, row) => {
                return h('c-mdm-view', {
                  props: {
                    value: this.getShopProp('shopType')(row),
                    docCode: 'QY026',
                    label: this.getShopProp('shopPatternName')(row)
                  }
                })
              }, true)
            }
            // render: (h, row) => {
            //   return h('c-mdm-view', {
            //     props: {
            //       value: this.getShopProp('shopType')(row),
            //       docCode: 'QY026',
            //       label: this.getShopProp('shopPatternName')(row)
            //     }
            //   })
            // }
          },
          {
            prop: 'shopClassify',
            label: '门店类型',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, (h, row) => {
                return h('c-mdm-view', {
                  props: {
                    value: this.getShopProp('shopClassify')(row),
                    docCode: 'QY028',
                    label: this.getShopProp('shopClassifyName')(row)
                  }
                })
              }, true)
            }
            // render: (h, row) => {
            //   return h('c-mdm-view', {
            //     props: {
            //       value: this.getShopProp('shopClassify')(row),
            //       docCode: 'QY028',
            //       label: this.getShopProp('shopClassifyName')(row)
            //     }
            //   })
            // }
          },
          {
            prop: 'status',
            label: '启用状态',
            minWidth: 100,
            render: (h, row) => {
              return this.setShopGrey(h, row, (h, row) => {
                return h('c-dict-range-view', {
                  props: {
                    value: [1, '1'].includes(this.getShopProp('status')(row)) ? '启用' : '停用'
                  }
                })
              }, true)
            }
            // render: (h, row) => {
            //   return h('c-dict-range-view', {
            //     props: {
            //       value: [1, '1'].includes(this.getShopProp('status')(row)) ? '启用' : '停用'
            //     }
            //   })
            // }
          }
        ]
      },
      addrTableConfig: {
        hideFuncBar: true,
        tabIndex: 12,
        setting: [
          {
            prop: 'code',
            label: '收货地址编码',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.code, false)
            }
          },
          {
            prop: 'name',
            label: '收货地址名称',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.name, false)
            }
          },
          {
            prop: 'simpleName',
            label: '简称',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.simpleName, false)
            }
          },
          {
            prop: 'countryName',
            label: '国别',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.countryName, false)
            }
          },
          {
            prop: 'provinceName',
            label: '所在省份',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.provinceName, false)
            }
          },
          {
            prop: 'cityName',
            label: '所在城市',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.cityName, false)
            }
          },
          {
            prop: 'countyName',
            label: '所在区/县',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.countyName, false)
            }
          },
          {
            prop: 'townName',
            label: '所在街道',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.townName, false)
            }
          },
          {
            prop: 'address',
            label: '详细地址',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.address, false)
            }
          },
          {
            prop: 'firstReceiver',
            label: '客户第一联系人',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.firstReceiver, false)
            }
          },
          {
            prop: 'firstReceiverTel',
            label: '客户第一联系人电话',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.firstReceiverTel, false)
            }
          },
          {
            prop: 'firstReceiverPhone',
            label: '客户第一联系人手机',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.firstReceiverPhone, false)
            }
          },
          {
            prop: 'secondReceiver',
            label: '客户第二联系人',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.secondReceiver, false)
            }
          },
          {
            prop: 'secondReceiverTel',
            label: '客户第二联系人电话',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.secondReceiverTel, false)
            }
          },
          {
            prop: 'secondReceiverPhone',
            label: '客户第二联系人手机',
            minWidth: 100,
            render: (h, row) => {
              return this.setAddressGrey(h, row, row.secondReceiverPhone, false)
            }
          }
        ]
      },
      accountTableConfig: {
        hideFuncBar: true,
        tabIndex: 13,
        setting: [
          {
            prop: 'accountCode',
            label: '账号编码',
            minWidth: 100,
            render: (h, row) => {
              return this.setAccountGrey(h, row, row.accountCode, false)
            }
          },
          {
            prop: 'accountName',
            label: '账号名称',
            minWidth: 100,
            render: (h, row) => {
              return this.setAccountGrey(h, row, row.accountName, false)
            }
          },
          {
            prop: 'accountTypeName',
            label: '账号类型',
            minWidth: 100,
            render: (h, row) => {
              return this.setAccountGrey(h, row, (h, row) => {
                return h('c-mdm-view', {
                  props: {
                    value: row.accountType,
                    docCode: 'QY034',
                    label: row.accountTypeName
                  }
                })
              }, true)
            }
            // render: (h, row) => {
            //   return h('c-mdm-view', {
            //     props: {
            //       value: row.accountType,
            //       docCode: 'QY034',
            //       label: row.accountTypeName
            //     }
            //   })
            // }
          },
          {
            prop: 'accountAbbr',
            label: '简称',
            minWidth: 100,
            render: (h, row) => {
              return this.setAccountGrey(h, row, row.accountAbbr, false)
            }
          },
          {
            prop: 'customerAddress',
            label: '收货地址',
            minWidth: 100,
            render: (h, row) => {
              return this.setAccountGrey(h, row, row.customerAddress, false)
            }
          },
          {
            prop: 'businessStatusName',
            label: '营业状态',
            minWidth: 100,
            render: (h, row) => {
              return this.setAccountGrey(h, row, (h, row) => {
                return h('c-mdm-view', {
                  props: {
                    value: row.businessStatus,
                    docCode: 'SLCM027',
                    label: row.businessStatusName
                  }
                })
              }, true)
            }
            // render: (h, row) => {
            //   return h('c-mdm-view', {
            //     props: {
            //       value: row.businessStatus,
            //       docCode: 'SLCM027',
            //       label: row.businessStatusName
            //     }
            //   })
            // }
          },
          {
            prop: 'personName',
            label: '客户经理',
            minWidth: 100,
            render: (h, row) => {
              return this.setAccountGrey(h, row, row.personName, false)
            }
          },
          {
            prop: 'soState',
            label: '销售冻结状态',
            minWidth: 120,
            render: (h, row) => {
              return this.setAccountGrey(h, row, v => {
              // 是否冻结，1是冻结，0是未冻结
                return [1, '1'].includes(v.soState) ? '冻结' : '未冻结'
              }, false)
            }
            // formatData: v => {
            //   // 是否冻结，1是冻结，0是未冻结
            //   return [1, '1'].includes(v.soState) ? '冻结' : '未冻结'
            // }
          }
        ]
      },
      transportObjectTableConfig: {
        hideFuncBar: true,
        tabIndex: 14,
        setting: [
          {
            prop: 'code',
            label: '送达方编码',
            minWidth: 100
          },
          {
            prop: 'name',
            label: '送达方名称',
            minWidth: 100
          },
          {
            prop: 'address',
            label: '送达方详细地址',
            minWidth: 140
          }
        ]
      },
      contactsTableConfig: {
        hideFuncBar: true,
        tabIndex: 15,
        setting: [
          {
            prop: 'contactProperty',
            label: '联系人性质',
            minWidth: 100,
            formatData: v => {
              // 联系人性质：当客户编码非空时，联系人性质为客户编码，门店编码非空时，联系人性质为门店联系人，
              // 当业务账号编码非空时，联系人性质为业务账号联系人，当三个编码均为空，则不展示在当前列表；
              switch (v.contactProperty) {
                case '1':
                  return '客户联系人'
                case '2':
                  return '门店联系人'
                case '3':
                  return '业务账号联系人'
                default:
                  return ''
              }
            }
          },
          {
            prop: 'customerCode',
            label: '客户编码',
            minWidth: 100
          },
          {
            prop: 'shopCode',
            label: '门店编码',
            minWidth: 100
          },
          {
            prop: 'accountCode',
            label: '业务账号编码',
            minWidth: 100
          },
          {
            prop: 'name',
            label: '联系人姓名',
            minWidth: 100
          },
          {
            prop: 'contactTypeCode',
            label: '联系人类别',
            minWidth: 100,
            render: (h, row) => {
              return h('c-mdm-view', {
                props: {
                  value: row.contactTypeCode,
                  docCode: 'QY019',
                  label: row.contactTypeName
                }
              })
            }
          },
          {
            prop: 'contactTel',
            label: '联系人电话',
            minWidth: 100
          },
          {
            prop: 'contactPhone',
            label: '联系人手机',
            minWidth: 100
          }
        ]
      }
    }
  },
  computed: {
    customerDetailDTO() {
      return this.detail.customerDetailDTO || {}
    },
    ctmCustomerDTO() {
      return this.detail.ctmCustomerDTO || {}
    },
    shopTableData() {
      const t = this.detail.ctmShopDTOS || []
      t.sort((a, b) => {
        return (this.getShopProp('status')(b) || 0) - (this.getShopProp('status')(a) || 0)
      })
      return t
    },
    addrTableData() {
      const t = this.detail.customerAddressDTOS || []
      t.sort((a, b) => {
        return (b.addrStatus || 0) - (a.addrStatus || 0)
      })
      return t
    },
    accountTableData() {
      const t = this.detail.accountDTOS || []
      t.sort((a, b) => {
        return (a.soState || 0) - (b.soState || 0)
      })
      return t
    },
    transportObjectTableData() {
      return this.detail.channelCusStoreDTOS || []
    },
    contactsTableData() {
      const t = this.detail.contactDTOS || []
      t.sort((a, b) => {
        return a.contactProperty - b.contactProperty
      })
      return t
    }
  },
  methods: {
    getShopProp(key) {
      return row => {
        return (row.shopDetailDTO || {})[key]
      }
    },
    greyRender(h, row, fun, isRender, isStop) {
      let child
      if (fun instanceof Function) {
        if (isRender) {
          child = fun(h, row)
        } else {
          child = h('div', {}, fun(row))
        }
      } else {
        child = h('span', {}, fun)
      }
      return h('div', {
        class: {
          'font-grey': isStop
        }
      }, [child])
    },
    // 门店信息 停用置灰
    setShopGrey(h, row, fun, isRender = false) {
      const isStop = ![1, '1'].includes(this.getShopProp('status')(row))
      return this.greyRender(h, row, fun, isRender, isStop)
    },
    // 收货地址 停用置灰
    setAddressGrey(h, row, fun, isRender = false) {
      const isStop = ![1, '1'].includes(row.addrStatus)
      return this.greyRender(h, row, fun, isRender, isStop)
    },
    // 业务账号 停用置灰
    setAccountGrey(h, row, fun, isRender = false) {
      const isStop = [1, '1'].includes(row.soState)
      return this.greyRender(h, row, fun, isRender, isStop)
    }
  }

}
</script>
<style lang="scss">
.font-grey{
  color: red !important;
  & *{
    color: red !important;
  }
}
</style>
